<template>
  <div class="chat">
    <LsTabs :="locTabsConfig" :dataList="chatLists" style="height: 100%">
      <template #label="scope">
        <!-- <el-img :src="scope.row.avatar"></el-img> -->
        <!-- <div style="display: flex"> -->
        <el-row :gutter="10">
          <el-col :span="12">
            <el-badge :value="12" class="item">
              <el-avatar :size="30" :src="scope.row.avatar"></el-avatar>
            </el-badge>
          </el-col>
          <el-col :span="12">
            <span>
              {{ scope.row.nickName }}
              <!-- {{ scope.row }} -->
            </span>
          </el-col>
        </el-row>
      </template>

      <template #content>
        <ChatContent></ChatContent>
      </template>
    </LsTabs>
  </div>
</template>
<script lang="ts" setup>
import { useStore } from "@/store";
import { ref, computed } from "vue";
import LsTabs from "./cps/tabs";
import ChatContent from "./cps/chatContent";
import { tabsConfig } from "./cps/tabs/config/config";
const drawer = ref(true);
const store = useStore();
store.dispatch("moduleChat/acGetFriendLists");
const locTabsConfig = {
  ...tabsConfig,
};
const chatLists = computed(() => store.state.moduleChat.chatFriendLists);
</script>
<style lang="less" scoped>
.el-overlay {
  position: absolute;
  left: 80%;
}
.el-drawer .rtl .open {
  width: 100% !important;
}
.chat {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
